<template>
    <div class="storeInfo">
        <div class="storeInfo-part">
            <h4 class="title">
                <span>合同基本信息</span>
                <el-button type="primary" @click="add_edit_alert = true">修改合同</el-button>
            </h4>
            <div class="storeInfo-container">
                <ul>
                    <li v-for="(item,index) in part1" :key="index">
                        <span class="thename">{{item}}:</span>
                        <span class="theinfo">{{info1[index]}}</span>
                    </li>
                </ul>
                <ul>
                    <li v-for="(item,index) in part2" :key="index">
                        <span class="thename">{{item}}:</span>
                        <span class="theinfo" v-html='info2[index]'></span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 员工提成的设置 -->

        <div class="storeInfo-part">
            <h4>合同基本信息</h4>
            <div class="storeInfo-container">
                <ul>
                    <li v-for="(item,index) in part3" :key="index">
                        <span class="thename">{{item}}:</span>
                        <span class="theinfo">{{info3[index]}}</span>
                    </li>
                </ul>
                <ul>
                    <li v-for="(item,index) in part4" :key="index">
                        <span class="thename">{{item}}:</span>
                        <span class="theinfo" v-html='info4[index]'></span>
                    </li>
                </ul>
            </div>
        </div>
        <el-dialog>
            
        </el-dialog>

    </div>
</template>
<style lang="scss" scoped>
    .storeInfo{
        padding:10px;
        .storeInfo-part{
            width: 100%;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            margin: 15px 0;
            h4{
                background: rgb(244, 246, 250);
                font-size:16px;
                font-weight: bold;
                line-height: 40px;
                padding-left:15px;
                display: flex;
                justify-content: space-between;
            }
            .storeInfo-container{
                display: flex;
                ul{
                    padding:20px;
                    flex:1;                   
                    li{
                        font-size:14px;
                        line-height: 34px;
                        .thename{
                            color:rgba(0, 0, 0, 0.5)
                        }
                        .theinfo{
                            color: #000;
                        }
                        h5{
                            font-weight: bold
                        }
                    }
                }
                .hasBorder{
                    border-top:1px solid #ccc;
                }
            }
        }
    }
</style>
<script>
import {abc}  from "../../../../js/abc.js"
import {potUrl} from '../../../../js/config_url.js';
export default {
    data(){
        return {
            contractinfo:{},
            part1:["合同编号","合同名称","加盟签约方","品牌授权位置","每间包厢费用"],
            info1:[],
            part2:["签约日期","合同期限","合同年限","签约房间数"],
            info2:[],
            part3:["魅品牌使用费","魅KTV服务管理费","基础市场费用分摊","中央娱乐系统使用费"],
            info3:[],
            part4:["加盟费","保证金","设计费"],
            info4:[],
            add_edit_alert:false,       
        }
    },
    mounted(){
        const that = this;
        let id = that.$route.params.contract_id
        abc.get(that,potUrl.contractinfo,{contract_id:id},res=>{
            let a = res.data;
            that.info1 = [
                a.contract_no,
                a.contract_title,
                a.customer_people,
                a.authorize_address,
                a.room_fee
            ]
            that.info2 = [
                a.limitation,
                a.contract_deadline,
                a.year_limit,
                a.authorize_room_num
            ],
            that.info3=[
                a.brand_royalties,
                a.service_fee,
                a.market_fee,
                a.system_fee
            ]
            that.info4=[
                a.initial_fee,
                a.deposit,
                a.design_fee
            ]
        })
    }
}
</script>
